<template>
  <div class="it-excel pd-20px">
    <el-upload
        class="upload-demo"
        ref="upl"
        action=""
        drag
        accept=".xls,.xlsx"
        :on-change="change"
        :auto-upload="false"
        :show-file-list="false"
        :limit="1"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传excel文件</div>
    </el-upload>
    <div>
      <el-button @click="transform" type="mini" >转换</el-button>
    </div>
    <div class="dis-flex pd-10px">
      <div class="left w-full">

        <CodeEdit v-model="content" language="javascript"></CodeEdit>
      </div>
      <div class="right w-full">
        <CodeEdit v-model="content2" language="javascript"></CodeEdit>
      </div>
    </div>
  </div>
</template>

<script>
import CodeEdit from "components/editor/CodeEdit";
import XLXSUtil from "utils/XLXSUtil";
import util from "utils/util";

export default {
  name: "ITExcel",
  components:{
    CodeEdit
  },
  data(){
    return {
      content: `[
          {
            "key": "A1"
          },
          {
            "key": "A2"
          }
      ]`,
      content2:``,
      data: {} ,
      xData: null
    }
  },
  methods:{
    change(file, fileList){
      this.$refs.upl.clearFiles()
      XLXSUtil.loadData(file.raw).then(data=>{
        this.xData = data ;
        return XLXSUtil.loadV2(JSON.parse(this.content.replace(/\n/g,"")) , data  )
      }).then(array=>{
        this.content2 = JSON.stringify(array)
      })
    },
    transform(){
      if(!this.xData){
        this.$message.error("请先上传文件")
        return ;
      }
      this.content2 = JSON.stringify(XLXSUtil.loadV2(JSON.parse(this.content.replace(/\n/g,"")) , this.xData  ))
    }
  }
}
</script>

<style scoped>

</style>
